<template>
  <view>
   <view class="operateList">
     <scroll-view class="scroll-list" scroll-y="true" :style="'height:' + clientHeight + 'px'">
     <view class="directory" v-for="(item,index) in directoryList" :key="index">
         <view class="directoryText">
           第{{item.sortId}}步: {{item.catalogName}}
         </view>
       <view class="step" v-for="(item1,index) in (item.mkManualDetailedList.slice().sort((a, b) => a.stepSortId - b.stepSortId))" :key="index">
         <view class="stepText">
           <view class="serialNum">
           <text>{{item1.stepSortId}}</text></view>
           <view class="illustrate">
           {{item1.stepContent}}
           </view>
         </view>
         <view class="stepImg">
         <image :src="baseUrl+item1.stepUrl" mode="widthFix"/>
         </view>
       </view>
     </view>
     <view class="out">
     已经到底了~~~
     </view>
     </scroll-view>
   </view>
  </view>
</template>

<script>
  import {appGetToList} from '@/api/system/manual/manual.js'
  import config from '@/config'
  export default {
    data() {
      return {
           baseUrl: config.baseUrl,
           clientHeight:null,
           directoryList:[],
           isloading:false,   
          directoryCount:0
      }
    },
    onLoad() {
      var that = this;
      uni.getSystemInfo({
        success: function(res) {
          let screenHeight = uni.getSystemInfoSync().windowHeight //获取屏幕高度
          // 通过query 获取其余盒子的高度
          let query = uni.createSelectorQuery().in(that)
          //通过query.exec返回的数组 进行减法 同时 去除margin 和border的
          query.exec(res => {
            that.clientHeight = screenHeight
          })
        }
      })
      this.getAppGetToList()
    },
    methods: {
      //查询小程序的步骤列表
      getAppGetToList(cb){
        // 打开遮罩层
        this.$modal.loading("数据加载中...");
        // ** 打开节流阀
        this.isloading = true
        appGetToList().then(response => {
          if (response.code === 200) {
            // 关闭遮罩层
            this.$modal.closeLoading();
            uni.stopPullDownRefresh()
            // 关闭节流阀
            this.isloading = false
            // 只要数据请求完毕，就立即按需调用 cb 回调函数
            cb && cb()
            this.directoryCount=response.rows.length
            this.directoryList = [...this.directoryList, ...response.rows]
          }
        })
      },
      empty() {
        this.isloading = false
        this.directoryList = []
        this.queryParams.pageNum = 1
      },
    },
    onReachBottom() {
        // 判断是否还有下一页数据
        if (this.queryParams.pageNum * this.queryParams.pageSize >= this.directoryCount) return uni.$showMsg('数据加载完毕')
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if (this.isloading) return
      //让页码值自增+1
      this.queryParams.pageNum += 1
      // 重新获取列表数据
      this.getAppGetToList()
    },
    onPullDownRefresh() {
       this.empty()
      //重新发起数据请求
       this.getAppGetToList()
    }
  }
</script>

<style>
.operateList{
  margin: 0 auto 0 auto;width: 90%;
}
.directory{
margin-top: 40rpx;
}
.directoryText{
  font-size: 44rpx;font-weight: bold;
}
.step{
  margin-top: 40rpx;
}
.stepText{
  display: flex;align-items: center;justify-content:flex-start;
}
.serialNum{
  font-size: 28rpx;color: white;background-color: #0089F9;border-radius: 100rpx;text-align: center;flex:0.5;
}
.illustrate{
  margin-left: 20rpx;flex: 8;font-weight: 600;
}
.stepImg{
  margin-top:30rpx;margin-left: 20rpx;
}
.stepImg>image{
  width: 650rpx;
}
.out{
  text-align: center;margin-top: 20rpx;
}
</style>
